<template>
  <el-button :class="className" v-on="$listeners" v-bind="$attrs">
    <slot></slot>
  </el-button>
</template>

<script>
export default {
  props: {
    className: {
      type: String,
      default: "",
    },
  },
};
</script>

<style lang="less" scoped>
.primary {
  border-radius: 4px;
  width: 120px;
  height: 35px;
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(220, 220, 220, 1);
  color: rgba(126, 126, 126, 1);
  &:hover {
    background-color: rgba(222, 222, 222, 0.8);
  }
  &:active {
    background-color: rgba(222, 222, 222, 0.6);
  }
  &:focus {
    background-color: rgba(222, 222, 222, 0.6);
  }
}
.confirm {
  border-radius: 4px;
  width: 120px;
  height: 35px;
  background-color: rgba(26, 188, 156, 1);
  border: 1px solid rgba(22, 160, 133, 1);
  color: #fff;
  &:hover {
    color: #fff;
    background-color: rgba(26, 188, 156, 0.8);
  }
  &:active {
    color: #fff;
    background-color: rgba(26, 188, 156, 0.6);
  }
  &:focus {
    color: #fff;
    background-color: rgba(26, 188, 156, 0.6);
  }
}
.cancel {
  border-radius: 4px;
  width: 120px;
  height: 35px;
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(220, 220, 220, 1);
  color: rgba(126, 126, 126, 1);
  &:hover {
    color: rgba(126, 126, 126, 1);
    background-color: rgba(222, 222, 222, 0.8);
  }
  &:active {
    color: rgba(126, 126, 126, 1);
    background-color: rgba(222, 222, 222, 0.6);
  }
  &:focus {
    color: rgba(126, 126, 126, 1);
    background-color: rgba(222, 222, 222, 0.6);
  }
}
.add {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 4px;
  width: 120px;
  height: 35px;
  color: rgba(52, 152, 219, 1);
  border: 1px solid rgba(41, 128, 185, 1);
  &:hover {
    color: rgba(52, 152, 219, 1);
    border: 1px solid rgba(41, 128, 185, 1);
    background-color: rgba(222, 222, 222, 0.8);
  }
  &:active {
    color: rgba(52, 152, 219, 1);
    border: 1px solid rgba(41, 128, 185, 1);
    background-color: rgba(222, 222, 222, 0.6);
  }
  &:focus {
    color: rgba(52, 152, 219, 1);
    border: 1px solid rgba(41, 128, 185, 1);
    background-color: rgba(222, 222, 222, 0.6);
  }
}
.export {
  border-radius: 4px;
  width: 120px;
  height: 35px;
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(22, 160, 133, 1);
  color: rgba(22, 160, 133, 1);
  &:hover {
    color: rgba(22, 160, 133, 1);
    background-color: rgba(222, 222, 222, 0.8);
  }
  &:active {
    color: rgba(22, 160, 133, 1);
    background-color: rgba(222, 222, 222, 0.6);
  }
  &:focus {
    color: rgba(22, 160, 133, 1);
    background-color: rgba(222, 222, 222, 0.6);
  }
}
.delete {
  border-radius: 4px;
  width: 120px;
  height: 35px;
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(213, 62, 62, 1);
  color: rgba(213, 62, 62, 1);
  &:hover {
    color: rgba(213, 62, 62, 1);
    border: 1px solid rgba(213, 62, 62, 1);
    background-color: rgba(222, 222, 222, 0.8);
  }
  &:active {
    color: rgba(213, 62, 62, 1);
    border: 1px solid rgba(213, 62, 62, 1);
    background-color: rgba(222, 222, 222, 0.6);
  }
  &:focus {
    color: rgba(213, 62, 62, 1);
    border: 1px solid rgba(213, 62, 62, 1);
    background-color: rgba(222, 222, 222, 0.6);
  }
}
.import {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 4px;
  width: 120px;
  height: 35px;
  color: rgba(52, 152, 219, 1);
  border: 1px solid rgba(41, 128, 185, 1);
  &:hover {
    color: rgba(52, 152, 219, 1);
    border: 1px solid rgba(41, 128, 185, 1);
    background-color: rgba(222, 222, 222, 0.8);
  }
  &:active {
    color: rgba(52, 152, 219, 1);
    border: 1px solid rgba(41, 128, 185, 1);
    background-color: rgba(222, 222, 222, 0.6);
  }
  &:focus {
    color: rgba(52, 152, 219, 1);
    border: 1px solid rgba(41, 128, 185, 1);
    background-color: rgba(222, 222, 222, 0.6);
  }
}
.text {
  color: rgba(22, 160, 133, 1);
  font-size: 14px;
}
</style>
